import React, { Component } from "react";

class App extends Component {
  state = {
    name: "xiangge",
    title: "标题",
    show: true,
    list: ["xiangge", "laogao", "xiaoli"],
    list2: [
      {
        id: 1,
        name: "zhangsan",
      },
      {
        id: 2,
        name: "lisi",
      },
    ],
    content: "<h2>哈哈</h2>",
  };

  render() {
    const { show, list, list2 } = this.state;

    return (
      <>
        <h2>state的渲染</h2>
        <p>name: {this.state.name}</p>
        <button title={this.state.title}>btn</button>

        {/* 相当于v-show */}
        {/* <p style={{ display: this.state.show ? "block" : "none" }}>
          你看到我了
        </p> */}

        {/* 相当于v-if */}
        {/* 使用三目或者短路运算 */}
        {/* {this.state.show ? <p>你看到我了</p> : null} */}
        {show && <p>你看到我了</p>}

        {/* 相当于v-for */}
        <ul>
          {list.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>

        <ul>
          {list2.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>

        {/* 相当于v-html */}
        {/* <div>{this.state.content}</div> */}
        <div dangerouslySetInnerHTML={{ __html: this.state.content }}></div>
      </>
    );
  }
}

export default App;
